<template>
	<view class="loginAll">
		<view class="logo">
			<!-- <image src="../../static/logo (2).png" mode="aspectFit"></image> -->
			<text>主题咖APP</text>
			
		</view>
		<!-- 手机短信验证码登录 -->
		<view class="loginContent">
			<!-- 自定义表单校验 -->
			<uni-forms ref="customForm" :rules="state.customRules" :modelValue="state.customFormData">
				<view class="inp">
					<uni-forms-item name="phone"  >
						<input v-model="state.customFormData.phone" placeholder="请输入手机号" class="input"
						 style="border: solid 1px rgb(235, 235, 235);margin: 10rpx 10rpx;padding: 15rpx 0;border-radius: 10rpx;"
						 />
					</uni-forms-item>
				</view>
				
				<uni-forms-item name="code">
					<view class="input-btn" style="display: flex;width: 96%;border: solid 1px rgb(235, 235, 235);margin: 10rpx 10rpx;padding: 5rpx 0;border-radius: 10rpx;">
						<input v-model='state.customFormData.code'
							 placeholder="请输入验证码" style="margin: 10rpx 20rpx;" class="input" />
						<button class="codeText" @click="sendCode" style="background-color: #ff9800; color: white;"
							:disabled="state.customFormData.phone == '' ? true : false">{{state.buttonText}}</button>
						<!-- <view v-if="state.countdown > 0"></view> -->
					</view>
				</uni-forms-item>
			</uni-forms>
			<button style="background-color: #ff9800; color: white;" @click="submit('customForm')">登录</button>
			<view class="toPW" @click="toPW">密码登录</view>
			<view class="setting">
				<navigator url="/pages/login/register" hover-class="navigator-hover">
					<view class="label">还未注册，点击注册</view>
				</navigator>
				<navigator url="/pages/login/forget" hover-class="navigator-hover">
					<view class="label">忘记密码？</view>
				</navigator>
			</view>
		</view>
		<!-- 第三方登录 -->
		<view class="threeLogin">
			<!-- 标题 -->
			<view class="titleHeader">
				<text class="line"></text>
				<text class="text" style="color: white;">第三方登录</text>
				<text class="line"></text>
			</view>
			<!-- 第三方登录图标 -->
			<view class="loginIcon">
				<image src="../../static/img/u4871.svg" @tap="loginOther('weixin')"></image>
				<image src="../../static/img/u4874.svg" @tap="loginOther('qq')"></image>
				<image src="../../static/img/u4875.svg" @tap="loginOther('sinaweibo')"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		provide,
		ref
	} from 'vue'
	const state = reactive({
		customFormData: {
			codeState: false,
			phone: '',
			code: ''
		},
		// 自定义表单校验规则
		customRules: {
			phone: {
				rules: [{
						required: true,
						errorMessage: '请输入手机号'
					},
					// {
					// 	pattern: /^[1]([3-9])[0-9]{9}$/,
					// 	errorMessage: '手机号不合法！'
					// }
				]
			},
			code: {
				rules: [{
					required: true,
					errorMessage: '验证码不能为空'
				}]
			},
		},
		// 后端获取到的验证码
		code: '',
		// 短信倒计时
		countdown: 0,
		timer: null,
		buttonText: '获取验证码',
	})
	// 获取组件实例
	const {
		proxy
	} = getCurrentInstance()

	// const customForm = ref(null)

	const submit = (ref) => {
		proxy.$refs[ref].validate().then(res => {
			// console.log('success', res);
			// uni.showToast({
			// 	title: `校验通过`
			// })
			if (state.code === state.customFormData.code) {
				// 设置用户登录状态为true
				// this.$isUserLoggedIn = true;
				uni.request({
					url: 'http://localhost:3000/ljb/login',
					data: state.customFormData,
					method: 'POST'
				}).then(res => {
					console.log(res, 1212121212);
					if (res.data.code === 200) {
						uni.showToast({
							icon: 'success',
							title: res.data.msg
						})
						uni.getStorageSync('token', JSON.stringify(res.data.token))
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/recommend/index'
							})
						}, 1500)
					} else if (res.data.code === 401) {
						uni.showToast({
							icon: 'error',
							title: res.data.msg,
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/register'
							})
						}, 2000)
					}
				})
			} else {
				uni.showToast({
					icon: 'error',
					title: 验证码错误
				})
			}
		}).catch(err => {
			console.log('err', err);
			uni.showToast({
				icon: 'error',
				title: '验证码错误'
			})
			// 测试跳转页面
			// uni.switchTab({
			// 	url: '/pages/tabbar/tabbar-5/tabbar-5'
			// })
		})
	}
	// 发送短信
	const sendCode = () => {
		state.countdown = 60;
		// 开始计时器
		state.timer = setInterval(() => {
			state.countdown--;
			if (state.countdown <= 0) {
				clearInterval(state.timer);
				// this.isDisabled = false;
				// this.buttonText = '发送验证码';
			} else {
				state.buttonText = `${state.countdown}秒后重新发送`;
			}
		}, 1000);
		uni.request({
			url: 'http://localhost:3000/ljb/sendCode',
			data: {
				phone: state.customFormData.phone
			},
			method: 'POST'
		}).then(res => {
			// console.log(res.data);
			state.code = res.data.data.captcha
			uni.setStorageSync('loginC', JSON.stringify(res.data));
		})
	}

	// 密码登录
	const toPW = () => {
		// JSON.parse(uni.setStorageSync('userinfo','{}'))
		console.log(123);
		uni.navigateTo({
			url: '/pages/login/pwdLogin'
		})
	}

	// 第三方快捷登录
	const loginOther = (mode) => {
		uni.login({
			provider: mode,
			success: (res) => {
				// 最主要的openID
				// let openid = res.authResult.openid
				uni.getUserInfo({
					provider: mode,
					success: (res) => {
						// console.log(res,'获取到授权后的用户信息');
						let provider = mode;
						let openid = res.userInfo.openId || res.userInfo.openid;
						let nickName = res.userInfo.nickName;
						let avatarUrl = res.userInfo.avatarUrl;
						console.log(provider,openid,nickName,avatarUrl,99999);
						// 接口问题
						uni.request({
							url: 'http://localhost:3000/ljb/loginOther',
							method: 'POST',
							data: {
								provider,
								openid,
								nickName,
								avatarUrl,
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
						}).then(res => {
							let userMess = res.data.user
							uni.setStorageSync('userinfo', JSON.stringify(userMess))
							let data = JSON.parse(uni.getStorageSync('userinfo'))
							console.log(data, '本地存储获取到的用户信息');
							// console.log(userMess,'获取到的用户信息');
							// localStorage.setItem('userinfo',JSON.stringify(userMess))
							// console.log(res.data.user,'后端请求接口成功后返回的数据');
							// 保存用户信息 用户昵称和头像
							uni.switchTab({
								url: '/pages/teacher/courseTable/courseTable'
							})
						})
					}
				})
			}
		})
	}
</script>
 
<style lang="scss" scoped>
	.loginAll {
		height: 97.3vh;
		padding: 20rpx;
		background-image: url(/static/u=776195020,626920154&fm=253&fmt=auto&app=138&f=JPEG.webp);
		background-size: cover;
		opacity: 0.85;
	}

	.logo {
		height: 280rpx;
		line-height: 280rpx;
		
	}
	.logo>text{
		margin: 0 15rpx;
		color: white;
		font-size: 60rpx;
	}

	.loginContent {
		margin-top: 100rpx;
		line-height: 40rpx;
	}
	
	.loginContent>button {
		margin-bottom: 30rpx;
		margin-top: 80rpx;
		border-radius: 296rpx;
		background-color: rgba(71, 120, 240, 1);
	}

	.codeText {
		float: right;
		background-color: rgba(71, 120, 240, 1);
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
	}
	.submit{
		background-color:#ff9800 ;
	}
	.toPW {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		font-size: 35rpx;
		color: #fff;
		background-color: green;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.threeLogin {
		margin-top: 200rpx;
	}

	.titleHeader {
		width: 100%;
		text-align: center;
	}

	.line {
		display: inline-block;
		width: 240rpx;
		border-top: 1px solid #ccc;
		vertical-align: 5px;
	}

	.loginIcon {
		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;
	}

	.loginIcon image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
	}

	.setting {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.label {
		font-size: 25rpx;
		color: white;
	}
</style>